import React, { Component } from 'react';
import { getMomentType, delMomentType, createMomentType } from '@/api/index';
import { CheckCard } from '@ant-design/pro-card';
import { Button, Modal, Input, Form, message } from 'antd';
export default class Sort extends Component {
  state = {
    dataList: [],
    createVis: false,
    active: -1,
    title: '',
  };
  componentDidMount() {
    getMomentType().then((res) => {
      if (res.code === 200) {
        this.setState({ dataList: res.data });
      }
    });
  }
  handleDel() {
    delMomentType({ ID: this.state.active }).then((res) => {
      if (res.code === 200) {
        message.success('删除成功');
        getMomentType().then((res) => {
          if (res.code === 200) {
            this.setState({ dataList: res.data });
          }
        });
      } else {
        message.error('删除失败');
      }
    });
  }
  handleCreate() {
    createMomentType({ name: this.state.title }).then((res) => {
      if (res.code === 200) {
        this.setState({ createVis: false, title: '' });
        message.success('创建成功');
        getMomentType().then((res) => {
          if (res.code === 200) {
            this.setState({ dataList: res.data });
          }
        });
      } else {
        message.error('创建失败');
      }
    });
  }
  render() {
    return (
      <div>
        <div>
          {this.state.dataList.map((item) => {
            return (
              <CheckCard
                title={item.name}
                description={item.create_time}
                key={item.name}
                onClick={() => this.setState({ active: item.m_typeID })}
              />
            );
          })}
        </div>
        <div>
          <Button style={{ marginRight: '10px' }} onClick={() => this.handleDel()}>
            删除
          </Button>
          <Button type="primary" onClick={() => this.setState({ createVis: true })}>
            新增
          </Button>
        </div>
        <Modal
          title="创建"
          visible={this.state.createVis}
          onCancel={() => {
            this.setState({ createVis: false });
          }}
          onOk={() => this.handleCreate()}
        >
          <Form>
            <Form.Item label="标题">
              <Input
                value={this.state.title}
                onChange={(event) => {
                  this.setState({ title: event.target.value });
                }}
              />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}
